<template>

     <div class="containerWrapper" >


            <div class="container" >

              <el-form ref="form" :model="form" label-width="180px">
                <el-form-item label="用户名">
                  <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
              </el-form>



            </div>




     </div>


</template>

<script>
    import router from '@/router'
    import request from "@/utils/request";
    export default {

        name:'Login',
        data(){
            return {
              form:{
                username:'',
                password:''
              }
            }
        },
        methods:{
          login(){
            // request({
            //   method: 'get',
            //   url: '/login?username=' + this.form.username + '&password=' + this.form.password,
            // }).then(ret => {
            //
            //   let token = ret.data;
            //   // let {data} = ret;
            //   console.log("token ",ret.data);
            //   alert("token"+token)
            //
            //   localStorage.setItem("token",token)
            //
            // })



            //调用store对象
            this.$store.dispatch("Login", this.form).then(() => {
                  this.$router.push({ path:  "/" }).catch(()=>{});
            }).catch(() => {
                this.$message({
                  type:'error',
                  message:'登录失败'
                })
            });




          }
        }


    }


</script>


<style scoped>


    .containerWrapper{
        height: 100%;
        /*background-color: #42b983;*/
      display: flex;
      align-items:center;
      justify-content: center;
    }


    .container{
        height: 400px;
        width:380px;
        /*border: solid 1px black;*/
        /*margin: 0px auto;*/




    }






</style>


